<!DOCTYPE html>
<html>
<head>
    {% load staticfiles %}

    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.staticfile.org/sockjs-client/0.3.4/sockjs.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'cah/css/style.css' %}" />
    <script type="text/javascript" src="{% static 'cah/js/game.js' %}"></script>

    <meta charset="UTF-8">
    <title>Cards Against Humanity</title>
</head>

<body oncontextmenu='return false' ondragstart='return false' onselectstart ='return false'>
    <audio id="voice"></audio>
    <header>
    <div id="logo"></div>
    </header>
    <div class=container>
        <!-- 登录页面 -->
        <div id="login_page">
            <div id="loginSplash">
                <span id="title">Cards Against Humanity</span><br/>
                <span id="subtitle">反人类卡牌游戏(在线版)</span><br/>
                <p>fork version by fy (python)<br />
                原作地址：<a href="http://www.cahcard.com:24571/CAH/index.html">http://www.cahcard.com:24571/CAH/index.html</a></p>
                <span id="description">
                    反人类卡牌游戏：游戏分为黑卡与白卡，黑卡包含一段问题，或是缺少词语的句子；白卡包含一条短语。<br/><br/>
                    每轮游戏依次选择一名玩家作为裁判，玩家手中有8张白卡，用于回答黑卡所提出的问题，所有玩家选择完卡牌之后亮出自己的白卡。<br/><br/>
                    裁判选择一张最满(wu)意(jie)的(cao)答案，并为该玩家获得一分。<br/><br/>
                    PS. 如果安装了广告屏蔽插件(比如AdBlock)的话需要暂时将它禁用才能进入游戏<br/>
                    PS2. 使用CTRL+鼠标滚轮可以缩放游戏尺寸<br/><br />

                    <button onclick="javascript:$('#psn').toggle();">py版本开发者的留言</button>
                    <div id="psn" style="display:none;text-align:center;margin-top:10px;line-height:1.2em">
                        这是个很有意思的游戏，我使用python复刻了它。<br/>
                        完全重写了服务端和js部分，html大部分沿用了原版。<br />
                        这个版本只实现了基础逻辑，也没有添加什么卡，不过不依赖 websocket，可以在更多浏览器上执行。<br/>
                        欢迎访问我的博客： <a href="http://ichiyu.me">http://ichiyu.me</a> (很少打理，将来会添加内容)<br/>
                        这个项目将公开在：<a href="http://git.oschina.net/fy0/cah">http://git.oschina.net/fy0/cah</a>
                    </div>
                </span>
            </div>
            <div id="loginSection">
                用户名：<input type="text" maxlength="10" id="login_text" /><input type="button" id="login_btn" value="进入"/><br/>
                <span id="loginTip"></span>
            </div>
        </div>
        <!-- 大厅页面 -->
        <div id="lobby_page">
            <div id="rooms">

            </div>
            
            <div id="playerList">
                <div id="playerInfoListTitle">大厅玩家列表</div>
                <div id="playerInfoList"></div>
            </div>
            
            <div id="messageList">
                <div id="messageInfoList"></div>
                <input type="text" id="inputMessageText"/>
            </div>
            
            <div id="controls">
                <div id="btn_room_add" class="lobbyButton">创建房间</div>
                <div id="btn_wcard_add" class="lobbyButton" onclick="makeWhiteCard()">制作白卡</div>
                <div id="btn_bcard_add" class="lobbyButton" onclick="makeBlackCard()">制作黑卡</div>
                <div id="btn_setting" class="lobbyButton" onclick="">设置</div>
            </div>
        </div>
        <!-- 游戏页面 -->
        <div id="game_page">
            <div id="mostLeft">
                <div id="mostLeftTop">房间号：0</div>
                <div id="blackCardTop">
                    <div id="gameStartButton">开始游戏</div>
                </div>
                <div id="blackCard"><div id="blackCardContent"></div></div>
                <div id="chatInfo"></div>
                <input id="chatMessage" type="text" maxlength="50" onkeydown="roomMessageSendKey(event)"/>
            </div>
            <div id="middle">
                <div id="left">
                    <div id="leftTop">出牌区域</div>
                    <div id="jcards">
                    </div>
                </div>
                <div id="right">
                    <div id="rightCover">裁判</div>
                    <div id="rightTop">我的手牌</div>
                    <div id="white_cards">

                    </div>
                </div>
            </div>
            <div id="mostRight">
                <div id="playerList">
                </div>
                <div id="spectatorList">
                </div>
                <div id="gameButtons">
                    <div class="inroomButton" id="spectateButton">参战/旁观</div>
                    <div class="inroomButton" id="leaveRoomButton">离开房间</div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        Copyright &copy; 蘑菇独立游戏开发工作室 2015-2019<br/>
        更多信息请加QQ群：224883545
    </footer>
</body>
</html>

